<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
    <div ref="print" id="printArea">
      <div v-for="(item, index) in dayinlist" :key="index">

        <!-- <div class="hr"></div> -->
        <!-- <div  v-for="(ite,ind) in item.num" :key="ind"> -->
        <p class="title center_text" style="font-size: 22px;">{{ item.biaoqian_name ? item.biaoqian_name : Infomation
        }}生产通知单
        </p>
        <!-- <hr style="line-height: 2px;margin:3px;"> -->
        <table style="border-collapse: collapse;margin-top:15px;" cellspacing="0">
          <tr>
            <td align="left" style="text-align: left;">
              <div><b>[日期]：</b> <span>{{ formatterTime(item.order_date) }}</span></div>
            </td>
            <td align="left" style="text-align: left;">
              <div><b>[订单号]：</b><span>{{ item.order_number }}</span></div>
            </td>
            <td align="left" style="text-align: left;">
              <div> <b>[型号]：</b><span>{{ item.model_number.model_number }}</span></div>
            </td>
            <td rowspan="3" align="right" valign="top" width="150">

              <vue-qr :logoSrc="imageUrl" :text='"{\"order_id\":" + item.id + "}"' margin="3" :size="90"></vue-qr>

              <!-- <span class="gr_see">扫码完成工序</span> -->
            </td>
          </tr>
          <tr>
            <td align="left" style="text-align: left;">
              <div> <b>[规格]：</b><span>{{ item.specification ? item.specification.specification : '' }}</span></div>
            </td>

            <td align="left" style="text-align: left;">
              <div><b>[件数]：</b> <span>{{ item.models_field.cases_num }}</span></div>
            </td>
            <td align="left" style="text-align: left;">
              <div> <b>[尺寸]：</b> <span>{{ item.models_field.size }}</span></div>
            </td>
          </tr>
          <tr>
            <td align="left" style="text-align: left;">
              <div> <b>[颜色]：</b> <span>{{ item.color ? item.color.color : '' }}</span></div>
            </td>
            <td align="left" style="text-align: left;">
              <div> <b>[方向]：</b> <span>{{ item.direction }}</span></div>
            </td>
            <td align="left" style="text-align: left;">
              <div> <b>[紧急程度]：</b>
                <span v-if="item.emergency_procedure == 1" style="color: #000">普通</span>
                <span v-if="item.emergency_procedure == 2" style="color: #000; font-weight: bold">紧急</span>
                <span v-if="item.emergency_procedure == 3" style="color: #000; font-weight: bold">十万火急</span>
              </div>
            </td>
          </tr>
          <tr>
            <td align="left" colspan="5" style="text-align: left;">
              <div> <b style="width: 100px;">[备注]：</b> 
                <el-input class="input_d" :autosize="{ minRows: 1 }"
                  type="textarea" v-model="item.remark" style="color: #000;"  maxlength="100" show-word-limit></el-input>
              </div>
            </td>
          </tr>
        </table>
        <div style="page-break-after: always" v-if="(index + 1) % 3 == 0"></div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      imageUrl: "",
      strDate: "",
      erweitext: "",
      isprint: true,
      Infomation: ''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(this.dayinlist)
    this.Infomation = this.$store.getters.Infomation.company_name
    this.currentTime();
  },
  methods: {
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
    },
    print() {

      this.$print(this.$refs.print);
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "-" +
        dateArr[0] +
        "-" +
        dateArr[1]
      //  +
      // " " +
      // dateArr[2] +
      // ":" +
      // dateArr[3] +
      // ":" +
      // dateArr[4];
    },
  },
};
</script>
<style scoped>
.input_d>>>textarea {
  border: none;
  font-size: 16px;
  color: #000;
}

.dayin {
  margin: 0 auto;
  /* max-width:500px; */
  box-sizing: border-box;
}

#printArea {
  width: 195mm;
  height: 80mm;
  padding: 10px 20px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea>div {
  margin-top: 50px;
}

#printArea>div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table td {
  /* height:20px; */
  /* line-height:20px; */
  /* font-size: 35px; */
}

#printArea table {
  /* border: 1px solid #c5c5c5; */
}

#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 3px;
  margin: 0;
  font-size: 14px;
}

#printArea table td div {
  width: 100%;
  display: flex;
  align-items: center;
}

#printArea table tr {
  /* display:inline-block; */
  /* line-height: 18px; */
}

#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 3px 0;
}

@page {
  size: auto;
  /* auto is the initial value */
  margin: 3mm;
  /* this affects the margin in the printer settings */
}

.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  display: block;
  margin: 20px auto;

}

.hr {
  width: 100%;
  height: 2px;
  background: #000;
  margin-bottom: 15px;
  margin-top: 15px;
}

.title {
  font-size: 22px;
  color: #000;
  text-align: center;
  margin: 0;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-top: 5px;
}

.box .left .el-row {
  margin-top: 10px;
}

.box .left .el-row .el-col {
  text-align: left;
  color: #333;
  font-weight: bold;
}

.center_text {
  text-align: center !important;
  font-size: 22px;
}

.gr_see {
  font-size: 14px;
  display: block;
  margin-bottom: 10px;

}

span {
  font-size: 16px;
  font-weight: 500;
  word-wrap: break-word;
  word-break: break-word;
}

b {
  min-width: 15mm;
  font-weight: 500;
  font-size: 16px;
}

@media print {


  .input_d>>>textarea {
    border: none;
    color: #000;
    font-size: 16px;
  }

  .dayin {
    margin: 0 auto;
    /* max-width:500px; */
    box-sizing: border-box;
  }

  #printArea {
    width: 195mm;
    height: 80mm;
    padding: 10px 20px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  #printArea>div {
    margin-top: 50px;
  }

  #printArea>div:first-child {
    margin-top: 0px;
  }

  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }

  #printArea table th {
    color: white;
    height: 50px;
    line-height: 50px;
    font-size: 35px;
  }

  #printArea table {
    /* border: 1px solid #c5c5c5; */
  }

  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding: 3px;
    margin: 0;
    font-size: 14px;
  }

  #printArea table td div {
    width: 100%;
    display: flex;
    align-items: center;
  }

  #printArea table tr {
    /* display:inline-block; */
    /* line-height: 18px; */
  }

  #printArea table thead th {
    background-color: #0a8fa1;
  }

  #printArea table tr th,
  table tr td {
    padding: 3px;
  }

  @page {
    size: auto;
    /* auto is the initial value */
    margin: 3mm;
    /* this affects the margin in the printer settings */
  }

  .procedure {
    word-wrap: break-word;
  }

  .dayin_btn {
    background: #0a8fa1;
    border: none;
    margin: 20px 0;
  }

  .hr {
    width: 100%;
    height: 2px;
    background: #000;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .title {
    font-size: 22px;
    color: #000;
    text-align: center;
    margin: 0;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-top: 5px;
  }

  .box .left .el-row {
    margin-top: 10px;
  }

  .box .left .el-row .el-col {
    text-align: left;
    color: #333;
    font-weight: bold;
  }

  .center_text {
    text-align: center !important;
    font-size: 22px;
  }

  .gr_see {
    font-size: 14px;
    display: block;
    margin-bottom: 10px;

  }

  span {
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
    word-break: break-word;
  }

  b {
    min-width: 15mm;
    font-weight: 500;
    font-size: 14px;
  }

}

@page {
  margin: 0.3cm;
}</style>
